<template>
  <div
    class="upload-area"
    @dragover="handleDragOver"
    @drop="handleDrop"
    :style="props.style"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits(["upload"]);

const props = defineProps({
  style: {
    type: Object,
    default: () => ({}),
  },
  accept: {
    type: String,
    default: "",
  },
});

const handleDragOver = (e: DragEvent) => {
  e.preventDefault();
  e.stopPropagation();
};

const handleDrop = (e: DragEvent) => {
  e.preventDefault();
  e.stopPropagation();
  if (e.dataTransfer) {
    if (props.accept) {
      return emits(
        "upload",
        [...e.dataTransfer.files].filter((file) => {
          return (
            file.type.includes(props.accept) ||
            file.type.startsWith(props.accept)
          );
        })
      );
    }
    emits("upload", e.dataTransfer.files);
  }
};
</script>

<style scoped lang="scss">
.upload-area {
  border: 1px dashed #409eff;
  position: relative;

  &:hover {
    border-style: dashed;
    border-color: #409eff;
  }
}

@media (max-width: 996px) {
  .upload-area {
    height: 20rem;
    min-height: 20rem;
  }
}

@media (max-width: 640px) {
  .upload-area {
    height: 15rem;
    min-height: 15rem;
  }
}

@media (max-width: 480px) {
  .upload-area {
    height: 10rem;
    min-height: 10rem;
  }
}
</style>
